<template>
  <v-page background="#f5f6fa">
    <template #header>
      <v-navbar :title="title" />
    </template>
    <template #default>
      <v-image
        v-if="landingPageData?.marketing_setting.header_banner"
        :src="landingPageData?.marketing_setting.header_banner"
        mode="widthFix"
        width="100vw"
        @click="redirectToLandingPage"
      />
      <v-image
        v-else
        oss-src="landing-page-marketing-default1.png"
        mode="widthFix"
        width="100vw"
        @click="redirectToLandingPage"
      />

      <v-image
        v-if="landingPageData?.marketing_setting.middle_banner"
        :src="landingPageData?.marketing_setting.middle_banner"
        mode="widthFix"
        width="100vw"
        @click="redirectToLandingPage"
      />
      <v-image
        v-else-if="product?.image"
        :src="product.image"
        mode="widthFix"
        width="100vw"
        @click="redirectToLandingPage"
      />

      <v-image
        v-if="landingPageData?.marketing_setting.bottom_banner"
        :src="landingPageData?.marketing_setting.bottom_banner"
        mode="widthFix"
        width="100vw"
        @click="redirectToLandingPage"
      />
      <v-image
        v-else
        oss-src="landing-page-marketing-default2.png"
        mode="widthFix"
        width="100vw"
        @click="redirectToLandingPage"
      />
    </template>
  </v-page>
</template>

<script setup lang="ts">
const landingStore = $store.landing();
const landingPageData = computed(() => landingStore.landingPageData);
const product = computed(() => landingStore.product);

const title = computed(() => {
  if (!landingPageData.value) return '';
  return landingPageData.value?.page_title || '商品详情';
});

const redirectToLandingPage = () => {
  landingStore.toSpec = true;
  uni.redirectTo({ url: '/pages/landing-page/landing-page' });
};
</script>
